<template>
    <headerTitle title="地址管理"></headerTitle>
    <backKey></backKey>
    <ul class="addresslist">
        <li v-for="(address, index) in addressList" :key="index">
            <div class="addresslist-left"  @click="choiceAddress(index)">
                <h3>{{ address.name + (address.sex == 0 ? "先生" : "女士") + " " + address.phone }}</h3>
                <p>{{ address.address }}</p>
            </div>
            <div class="addresslist-right">
                <i class="fa fa-edit" @click="router.push({ name: 'editAddressPage', query: { id: address.addressId } })"></i>
                <i class="fa fa-remove" @click="removeUserAddress(address.addressId,index)"></i>
            </div>
        </li>
    </ul>
    <!-- 新增地址部分 -->
    <div class="addbtn" @click="router.push({ name: 'addAddressPage' })">
        <i class="fa fa-plus-circle"></i>
        <p>新增收货地址</p>
    </div>
</template>

<script setup>
import headerTitle from '@/components/headerTitle.vue';
import { useRouter ,useRoute} from 'vue-router'
import { ref } from 'vue'
import { getDeliveryAddressListRequest ,removeDeliveryAddressRequest} from '@/js/request';
import backKey from '@/components/backKey.vue';
let router = useRouter()
let route=useRoute()
let addressList = ref([])
let choiceAddress = (index) => {
    if(route.query.id){
        router.replace({name:'confirmOrderPage',query:{id:route.query.id,addressIndex:index}})
    }
    
}
let removeUserAddress = (id,index) => {
    removeDeliveryAddressRequest(respon=>{
        if(respon.data.code==200){
            addressList.value.splice(addressList.value.indexOf(index-1), 1)
        }
    },id)
 }
getDeliveryAddressListRequest((respon=>{
    if(respon.data.code==200){
        addressList.value=respon.data.detail
    }
}))
</script>

<style lang="scss" scoped>
.addresslist {
    width: 100%;
    margin-top: 12vw;
    background-color: #fff;
}

.addresslist li {
    width: 100%;
    box-sizing: border-box;
    border-bottom: solid 1px #DDD;
    padding: 3vw;
    display: flex;
}

.addresslist li .addresslist-left {
    flex: 5;
    /*左边这块区域是可以点击的*/
    user-select: none;
    cursor: pointer;
    :active{
        border-color: #fff;
        box-shadow: none;
        background-color: white;
    }
}

.addresslist li .addresslist-left h3 {
    font-size: 4.6vw;
    font-weight: 300;
    color: #666;
}

.addresslist li .addresslist-left p {
    font-size: 4vw;
    color: #666;
}

.addresslist li .addresslist-right {
    flex: 1;
    font-size: 5.6vw;
    color: #999;
    cursor: pointer;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/*************** 新增地址部分 ***************/
.addbtn {
    width: 100%;
    height: 14vw;
    border-top: solid 1px #DDD;
    border-bottom: solid 1px #DDD;
    background-color: #fff;
    margin-top: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4.5vw;
    color: #0097FF;
    user-select: none;
    cursor: pointer;
}

.addbtn p {
    margin-left: 2vw;
}
</style>